<template>
  <el-dialog
    title="题目预览"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
  >
    <el-row>
      <el-col style="height:35px" :span="6"
        >【题型】
        {{
          pagData.questionType == "1"
            ? "单选题"
            : pagData.questionType == "2"
            ? "多选题"
            : "简答题"
        }}
      </el-col>
      <el-col style="height:35px" :span="6">【编号】：{{ pagData.id }}</el-col>
      <el-col style="height:35px" :span="6"
        >【难度】：  {{
          pagData.difficulty == "1"
            ? "简单"
            : pagData.difficulty == "2"
            ? "一般"
            : "困难"
        }}</el-col
      >
      <el-col style="height:35px" :span="6"
        >【标签】：{{ pagData.tags }}</el-col
      >
      <el-col style="height:35px" :span="6"
        >【学科】：{{ pagData.subjectName }}</el-col
      >
      <el-col style="height:35px" :span="6"
        >【目录】：{{ pagData.directoryName }}</el-col
      >
      <el-col style="height:35px" :span="6"
        >【方向】：{{ pagData.direction }}</el-col
      >
    </el-row>
    <hr />
    <el-row>
      <el-col>【题干】</el-col>
      <el-col v-html="pagData.question" style="color:red;"></el-col>
      <el-col
        > {{
          pagData.questionType == "1"
            ? "单选题"
            : pagData.questionType == "2"
            ? "多选题"
            : "简答题"
        }} 选项: (以下选中的选项为正确答案)</el-col
      >
      <div v-if="pagData.questionType !== 3">
        <div v-for="(item, index) in pagData.options" :key="index">
          <el-radio v-model="radio" :label="item.isRight">{{
            item.code
          }}</el-radio>
          <span>{{ item.title }}</span>
        </div>
      </div>
    </el-row>
    <hr />
    <el-row>
      <el-col>【参考答案】：</el-col>
      <el-button @click="Don = true">视频答案预览</el-button>
      <br />
      <video v-if="Don" controls autoplay :src="pagData.videoURL" />
    </el-row>
    <hr />
    <el-row>
      <el-col>【答案解析】：</el-col>
      <el-col v-html="pagData.answer"></el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>【题目备注】：</el-col>
      <el-col v-html="pagData.tags"></el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="colseTan"
        style="float:right; margin-top:-30px;"
        >关闭</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { questionType as mini, difficulty } from "@/api/hmmm/constants";
export default {
  props: {
    pagData: {
      type: Object
    }
  },
  data() {
    return {
      radio: 1,
      Don: false,
      dialogVisible: true,
      mini: mini,
      difficulty
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
          this.$emit("closeWindows", false);
          console.log("关闭成功");
        })
        .catch(_ => {
          this.$emit("closeWindows", false);
        });
    },
    colseTan() {
      this.$emit("closeWindows", false);
    }
  }
};
</script>
<style lang="scss" scoped></style>
